<!DOCTYPE html>
<html>
<head>
    <title>用户自定义地址去播放视频</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="__PUBLIC__/lib/video-js/video-js.css" rel="stylesheet">
    <script src="__PUBLIC__/lib/video-js/video.js"></script>
    <script>
        videojs.options.flash.swf = "__PUBLIC__/lib/video-js/video-js.swf"
    </script>
</head>
<body>
<div class="container" style="width: 1300px; height: 799px; margin-top: 30px;">
    <div class="row">
        <div class="col-lg-12  clearfix-context">
            <div style="margin-bottom: 20px;">
                <video id="live-stream" class="video-js vjs-default-skin vjs-big-play-centered"
                       controls width="1280" height="720" poster="__PUBLIC__/Common/static/images/videodemo.png"
                       data-setup='{"example_option":true}'>
                    <source src="rtmp://stream.amaitech.com/live/4001492482743?vhost=testlive.amaitech.com&auth_key=1493082743-0-0-fa77c7451bc405e34195ed10a9b36cd2" type="rtmp/mp4"></source>
                </video>
            </div>
            <div class="input-group">
                <input type="text" name="stream_address" id="stream_address" required autofocus
                       placeholder="输入媒体流地址，注意不要含有空格" class="form-control">
                <span class="input-group-btn input-btn">
                    <button class="btn btn-default" id="form_button" type="button">提交</button>
                </span>
            </div>
        </div>
    </div>
    <h1>这个可以播放：rtmp://live.hkstv.hk.lxdns.com/live/hks</h1>
    <h3>亚太第一卫视：rtmp://v1.one-tv.com/live/mpegts.stream</h3>
    <h3>香港电视台直播: rtmp://live.hkstv.hk.lxdns.com/live/hks</h3>
</div>

<script type="text/javascript">
    $(function(){
        var options = {};
        var player = videojs('live-stream',options,function onPlayerReady() {
            videojs.log('Your player is ready!');
            // In this context, `this` is the player that was created by Video.js.
            this.play();
            // How about an event listener?
            this.on('ended', function() {
                videojs.log('Awww...over so soon?!');
            });
        })
        var default_address = "rtmp://live.hkstv.hk.lxdns.com/live/hks";
        player.src(default_address);

        $("#form_button").click(function () {
            var msg = $("#msg");
            var stream_address = $('input[name="stream_address"] ').val();
            if(stream_address == ""){
                $('#stream_address ').css("border","1px #ff0000 solid");
                msg.text("请输入媒体流地址");
                msg.addClass("warning");
                return false;
            } else{
                $('#stream_address ').css("border","1px #ccc solid");
                msg.text("");
                msg.removeClass("warning");
            }
            player.src(stream_address);
        });
    });
</script>
</body>
</html>
